<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
	<!-- 样式类名操作：针对css3、添加、移除、切换的元素“类名”操作
	addClass()         有参：1个参和多个参
	                    语法：addClass("类名")
						 <p class="类名">
						语法：addClass("类名1 类名2")
						 <p class="类名1 类名2">
						 功能：匹配元素集合中的所有元素，添加一个或多个类名操作
						 理解：元素添加存在的样式
	removeClass         功能：匹配元素集合中的所有元素，移除一个或多个类名操作
						
	toggleClass()          功能：如果元素
	hasClass()           功能：坚持匹配元素集合中是否包含指定类名
	                     返回值bool
	 -->
	 <!-- 要求：1.jq引入 
	            2.html：   div  id="targetElement"
				            4个按钮   id="addClassBtn"    
							         id="removeClassBtn"
									 id="toggleClassBtn"
									 id="hasClassBtn"
							div  id="resultArea"
				3.css:   .bgColor{  300*300  背景色随意}
				         .borders{ 10个像素实线红色边框 倒角画圆}
	 -->
	 <script src="../js/jquery-1.11.1.js"></script>
	 <style>
		 .bgColor{
			 width: 300px;
			 height: 300px;
			 background: #aaaaff;
		 }
		 .borders{
			 border: 10px solid red;
			 border-radius: 50%;
		 }
	 </style>
	</head>
	<body>
		<div id="targetElement"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">检查类名是否存在</button>
		<div id="resultArea"></div>
		<script>
			//1.点击添加类名按钮 添加效果【样式】 300*300 背景色红色
			$('#addClassBtn').click(function(){
				//div添加样式-- 存在样式：类名
				$('#targetElement').addClass("bgColor borders");
				$('#resultArea').html("<h4>添加样式类名：bgColor borders</h4>");
			});
			//2.点击添加类名按钮 添加效果【样式】 300*300
			//300*300 背景色红色 圈 外层10px
			//3.点击 移除类名 按钮 添加效果【样式】 300*300 背景色红色
			$('#removeClassBtn').click(function(){
				$('#targetElement').removeClass("borders");
				$('#resultArea').html("<h4>移除样式类名：borders</h4>");
			});
			//4.点击 切换类名 按钮 添加效果【样式】 
			// 300*300 背景色红色 圈 外层10px
			$('#toggleClassBtn').click(function(){
				$('#targetElement').toggleClass("borders");
				$('#resultArea').html("<h4>切换样式类名：borders</h4>");
			});
			//5.点击 切换类名 按钮 添加效果【样式】
			//  去掉 300*300 背景色红色 
			$('#toggleClassBtn').click(function(){
				$('#targetElement').toggleClass("bgColor");
				$('#resultArea').html("<h4>切换样式类名：bgColor</h4>");
			});
			//6.检查类名是否存在：true存在  false不存在
			$('#hasClassBtn').click(function(){
				var hc=$('#targetElement').hasClass("borders");
				$('#resultArea').text("检查当前样式是否存在"+hc);
			});
		</script>
	</body>
</html>